<template>
  <div class="icons">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(pages,index) in imgPages" :key="index" :pages="pages">
        <div class="icon"  v-for="item in pages" :item="item" :key="item.id">
          <img class="icon-img" :src="item.imgURL">
          <p class="icon-p">{{item.desp}}</p>
        </div>
      </swiper-slide>
      <!--第二种方式  再声明一个数组，用来存放第二页的内容 每个页面slide只读自己页内容-->
      <!--<swiper-slide>-->
        <!--<div class="icon"  v-for="item in imgList2" :item="item" :key="item.id">-->
          <!--<img class="icon-img" :src="item.imgURL">-->
          <!--<p class="icon-p">景点门票</p>-->
        <!--</div>-->
      <!--</swiper-slide>-->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default{
  name: 'HomeIcons',
  data: function () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination' // 加轮播下面的小圆点
        // loop: true
      },
      imgList: [{
        id: '001',
        imgURL: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        desp: '景点门票'
      }, {
        id: '002',
        imgURL: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
        desp: '北京必游'
      }, {
        id: '003',
        imgURL: 'http://img1.qunarzz.com/piao/fusion/1803/6a/45f595250c73d102.png',
        desp: '夏日玩水'
      }, {
        id: '004',
        imgURL: 'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
        desp: '文化古迹'
      }, {
        id: '005',
        imgURL: 'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png',
        desp: '动植物园'
      }, {
        id: '006',
        imgURL: 'http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png',
        desp: '故宫'
      }, {
        id: '007',
        imgURL: 'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
        desp: '一日游'
      }, {
        id: '008',
        imgURL: 'http://img1.qunarzz.com/piao/fusion/1804/95/8d02011d149bdb02.png',
        desp: '汽车票'
      }, {
        id: '009',
        imgURL: 'http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png',
        desp: '游乐场'
      }, {
        id: '010',
        imgURL: 'http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png',
        desp: '全部玩乐'
      }
      ]
      //      imgList2: [{
      //        id: '001',
      //        imgURL: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png'
      //      }, {
      //        id: '002',
      //        imgURL: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png'
      //      }, {
      //        id: '003',
      //        imgURL: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png'
      //      }, {
      //        id: '004',
      //        imgURL: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png'
      //      }, {
      //        id: '005',
      //        imgURL: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png'
      //      }, {
      //        id: '006',
      //        imgURL: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png'
      //      }]
    }
  },
  computed: {
    imgPages: function () {
      var pages = []
      this.imgList.forEach((valus, index) => {
        var num = Math.floor(index / 8)
        if (!pages[num]) {
          pages[num] = []
        }
        pages[num].push(valus)
      })
      return pages
    }
  }
}
</script>
<style lang="stylus" scoped>
  .icons >>> .swiper-pagination-bullets
    bottom :0
    border-bottom :1px solid #eeeeee
  .icons >>> .swiper-pagination-bullet
    width: 0.1rem
    height: 0.1rem
    margin: 0 0.1rem
  .icons >>> .swiper-container
    width :100%
    height :0
    overflow :hidden
    padding-bottom :50%
  .icons
    width :100%
    height :0
    overflow :hidden
    padding-bottom :50%
    margin-top :0.2rem
    .icon
      float :left
      width :25%
      height :0
      padding-bottom :25%
      .icon-img
        display :block
        width :60%
        margin :0.08rem auto
      .icon-p{
        text-align :center
        font-size :0.28rem
        overflow :hidden
        white-space :nowrap
        text-overflow :ellipsis
      }
</style>
